<!DOCTYPE HTML>

<html>

<head>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<link rel="stylesheet" type="text/css" href="/stylesheets/map.css" />
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&region=SG"></script>
	<script type="text/javascript" src="/scripts/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="/scripts/customer.js"></script>
	<script type="text/javascript" src="/scripts/grasp.js"></script>
	<script type="text/javascript" src="/scripts/map.js"></script>
</head>

<body>
	<table style="width: 100%; height: 100%; border: 0px;">
		<tr>
			<td style="width: 80%; height: 100%;"><div id="map_canvas" style="width: 100%; height: 100%;"></div></td>
			<td style="width: 20%; height: 100%; vertical-align: top;">
				<p style="font-size:24px; font-weight:bold; text-align:center;" class="colorred">Input Parameters</p>
				<p></p>
				<p style="font-weight:bold;" class="colororange">
					Vehicle Capacity:&nbsp;<input id="input_capacity" type="text" value="50" style="border:none;" />
				</p>
				<p></p>
				<p style="font-weight:bold;" class="colororange">
					Depot:&nbsp;<input id="input_depot" type="text" value="Singapore 119077" style="border:none;" /><span id="button_setdepot" class="button bgblue">Set</span>
				</p>
				<p></p>
				<p style="font-weight:bold;" class="colororange">
					Customer Details:<br/>
				</p>
				<div>
					<table id="table_addresses">
						<tr id="tr_header">
							<th style="width: 55%;">Address</td>
							<th style="width: 25%;">Demand</td>
							<th style="width: 20%;">Action</td>
						</tr>
						<tr id="tr_addressinput">
							<td style="width: 55%;"><input id="input_address" type="text" style="width:100%; border:none;"/></td>
							<td style="width: 25%;"><input id="input_demand" type="text" style="width:100%; border:none;"/></td>
							<td style="width: 20%; text-align: center;"><span id="button_add" class="button bgblue">Add</span></td>
						</tr>
					</table>
				</div>
				<p></p>
				<p style="text-align: center;">
					<span id="button_distances" class="button bgpink">Calculate Distances</span><br/>
				</p>
				<p style="text-align: center;">
					<span id="button_grasp" class="button bgpink">GRASP</span><br/>
				</p>
				<p></p>
				<hr/>
				<p style="font-size:24px; font-weight:bold; text-align:center;" class="colorred">Results</p>
				<div id="div_results"></div>
			</td>
		</tr>
	</table>
</body>

</html>